<template>
  <div class="demo">
    <div class="demo-title">基本用法</div>
    <div class="demo-content">
      <Space direction="vertical" :size="12">
        <DatePicker v-model:value="value1" />
        <DatePicker v-model:value="value2" picker="week" />
        <DatePicker v-model:value="value3" picker="month" />
        <DatePicker v-model:value="value4" picker="quarter" />
        <DatePicker v-model:value="value5" picker="year" />
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import type { Dayjs } from 'dayjs';
  import Space from '@sscd/space';
  import DatePicker from '@sscd/date-picker';
  const value1 = ref<Dayjs>();
  const value2 = ref<Dayjs>();
  const value3 = ref<Dayjs>();
  const value4 = ref<Dayjs>();
  const value5 = ref<Dayjs>();
</script>
